import React, { useEffect, useState } from 'react'
import { Table, Space, Radio, Switch, Popconfirm, message, Button, Modal, Input, Pagination, Select, Form, Option } from 'antd';

// import { httpGetOrders, httpDelOrders } from '../../api/orders'
import { httpGetBulk, httpDelOrders, httpDelBulk, httpChangeState } from '../../api/bulk'
import { PropertySearch } from '../../components'
const Bulk = () => {
  const { Option } = Select;

  // 房源数据
  const [data, setData] = useState([]);
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(4);
  const [total, setTotal] = useState(0);//总页数
  //  搜索的内容
  const [one, setOne] = useState('');
  const [two, setTwo] = useState('');
  const [three, setThree] = useState('');
  const [four, setFour] = useState('');
  // 状态
  const [state, setState] = useState('')//状态
  const [status, setStatus] = useState('')//状态
  // const [value, setValue] = useState('')//搜索

  const columns = [
    {
      title: '序号',
      width: 30,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
      render: (_, record, index) => (
        <span>{(pageCode - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: '图片',
      width: 50,
      dataIndex: 'img',
      key: 'img',
      render: (_, record, index) => (
        <img src={record.img} alt="" style={{width:'100px',height:'100px'}}/>
      ),
    },
    {
      title: '楼盘名称',
      width: 60,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '楼盘地址',
      width: 50,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '发起人',
      width: 50,
      dataIndex: 'leader',
      key: 'leader',
    },
    {
      title: '起始时间',
      width: 20,
      dataIndex: 'upTime',
      key: 'upTime',
    },
    {
      title: '团购状态',
      width: 80,
      dataIndex: 'status',
      key: 'status',
      render: (_, { status, id }) => (
        <div>
          {status ==='true' ?
            <span>开团</span>
            :
            <div>未开团</div>
          }
        </div>
      )
    },
    {
      title: '状态',
      width: 80,
      dataIndex: 'status',
      key: 'status',
      render: (_, { status, id }) => (
        <div>
          {status ?
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={status === 'true'}
              onChange={() => onState(status, id)}
            />
            :
            <div>2</div>
          }
        </div>
      )
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 90,
      render: (_, record) => (
        <Space size="middle">
          <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData()
  }, [pageCode, one, two, three,four])

  // 获取团购数据
  const getData = async () => {
    const res = await httpGetBulk('/bulk', { pageCode, pageSize, one, two, three,four });
    setData(res.data.list)
    setTotal(res.data.total)
  }
  // 删除
  const handleDelete = async (id) => {
    console.log(11)
    const res = await httpDelBulk("/delBulk", { id })
    if (res.data.code === 200) {
      message.success(res.data.msg);
      getData()
    } else {
      message.warning(res.data.msg);
    }

  }
  // 状态改变
  const onState = async (status, id) => {
    console.log(status, id);
    const res = await httpChangeState('/changeBulkStatus', { status, id });
    getData()
    message.success(res.data.msg);

  }
  // 下拉框
  const handleChange = (value) => {
    setTwo(value)
  }
  
  // 搜索
  const getValueFromSon = (param) => {
    console.log(param, 'ggg')
    setOne(param.one)
    setTwo(param.two)
    setThree(param.three)
    setFour(param.four)
  }
  // page页码改变
  const onPageChange = (page) => {
    setPageCode(page)
  };
  return (
    <div>
      <div style={{ display: 'flex', marginBottom: '20px', marginLeft: '10px' }}>
        <PropertySearch sendValueToFather={getValueFromSon.bind(this)} />
        
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        pagination={false}
      />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

    </div>
  )
}
export default Bulk;
